<template>
  <p-modal
    title="异常处置（临时措施）"
    :width="width"
    centered
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    :wrapClassName="'ycczlscs'"
    @cancel="handleCancel"
  >
    <p-spin :spinning="confirmLoading">
      <!-- <h4 class="hTitle">异常信息</h4> -->
      <p-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        style="display:flex;flex-wrap: wrap;"
      >
       <p-collapse default-active-key="4" :bordered="false" style="width:100%;">
        <p-collapse-panel key="1" header="异常信息">
          <div style="width: 100%;display:flex;">
            <div class="formLeft">
              <info-list label-width="214">
                <info-list-item label="异常单号：">
                  {{123}}
                </info-list-item>
                <info-list-item label="异常产线(二级工序)：">
                  {{123}}
                </info-list-item>
                <info-list-item label="异常发起时间：">
                  {{123}}
                </info-list-item>
                <info-list-item label="异常描述：">
                  {{123}}
                </info-list-item>
              </info-list>
            </div>
            <div class="formRight">
              <info-list label-width="210">
                <info-list-item label="异常类型：">
                  {{123}}
                </info-list-item>
                <info-list-item label="异常数量：">
                  {{123}}
                </info-list-item>
                <info-list-item label="异常SN明细：">
                  {{123}}
                </info-list-item>
              </info-list>
            </div>
          </div>
        </p-collapse-panel>
        <p-collapse-panel key="2" header="异常分配(PQE判定)" :disabled="false">
          <div style="width: 100%;display:flex;flex-wrap:wrap;">
            <div style="width: 100%;display:flex;">
              <info-list label-width="188">
                <info-list-item label="异常判定：">
                  {{123}}
                </info-list-item>
              </info-list>
              <info-list label-width="188">
                <info-list-item label="是否切线：">
                  {{123}}
                </info-list-item>
              </info-list>
              <info-list label-width="130">
                <info-list-item label="是否返工：">
                  {{123}}
                </info-list-item>
              </info-list>
              <info-list label-width="130">
                <info-list-item label="缺陷等级：">
                  {{123}}
                </info-list-item>
              </info-list>
            </div>
            <div style="width: 100%;display:flex;margin-top:10px;">
              <info-list label-width="188">
                <info-list-item label="是否锁定产品：">
                  {{123}}
                </info-list-item>
              </info-list>
              <info-list label-width="188">
                <info-list-item label="锁定单号：">
                  {{123}}
                </info-list-item>
              </info-list>
            </div>
            <div style="width: 100%;display:flex;margin-top:10px;">
              <info-list label-width="188">
                <info-list-item label="生产策略：">
                  {{123}}
                </info-list-item>
              </info-list>
              <info-list label-width="188">
                <info-list-item label="问题处理人：">
                  {{123}}
                </info-list-item>
              </info-list>
            </div>
          </div>
        </p-collapse-panel>
        <p-collapse-panel key="3" header="主管审核">
          <div style="width: 100%;display:flex;">
            <info-list label-width="238">
              <info-list-item label="PQE主管审核意见：">
                {{123}}
              </info-list-item>
            </info-list>
            <info-list label-width="158">
              <info-list-item label="不同意原因：">
                {{123}}
              </info-list-item>
            </info-list>
          </div>
        </p-collapse-panel>
        <p-collapse-panel key="4" header="生产策略审核">
          <div style="display:flex;">
            <p-form-model-item style="margin-right: 20px;"  label="责任人确认" prop="zrrqr">
              <p-switch v-model="form.zrrqr" checked-children="是" un-checked-children="否" default-checked />
            </p-form-model-item>
            <p-form-model-item label="临时措施验证人" prop="lsccyzr">
              <p-input
                placeholder="请输入内容"
                v-model="form.lsccyzr"
              />
            </p-form-model-item>
          </div>
          <p-form-model-item style="width: 100%;" label="退回原因" prop="thyy">
            <p-input
              placeholder="请输入内容"
              v-model="form.thyy"
            />
          </p-form-model-item>
          <p-form-model-item style="width: 100%;" label="临时措施验证人" prop="lsccyzr">
            <p-input
              placeholder="请输入内容"
              v-model="form.lsccyzr"
            />
          </p-form-model-item>
        </p-collapse-panel>
        <p-collapse-panel key="5" header="异常处置记录">
          <p-table :scroll="{y:200}" :pagination="false" :columns="columns" :data-source="dataSource" bordered></p-table>
        </p-collapse-panel>
      </p-collapse>
      </p-form-model>
    </p-spin>
  </p-modal>
</template>

<script>
import _ from "lodash";
import mesPeProcess from "@/api/mesPeProcess";
export default {
  name: "ycczlscs",
  props: {
    value: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      handle: '',
      width: 820,
      visible: false,
      confirmLoading: false,
      dataSource: [
        {
          key: '1',
          ycjl: '异常触发：由产线J2线[周青]在2020-4-23 18:23:04发起物料异常事件',
        },
        {
          key: '2',
          ycjl: '异常触发：由产线J2线[周青]在2020-4-23 18:23:04发起物料异常事件',
        },
        {
          key: '3',
          ycjl: '异常触发：由产线J2线[周青]在2020-4-23 18:23:04发起物料异常事件',
        },
        {
          key: '4',
          ycjl: '异常触发：由产线J2线[周青]在2020-4-23 18:23:04发起物料异常事件',
        },
      ],
      columns: [
        {
          title: "序号",
          dataIndex: '',
          key:'rowIndex',
          width:60,
          align: 'center',
          customRender:function (t,r,index) {
            return parseInt(index)+1;
          }
        },
        {
          title: '异常记录',
          align: 'center',
          dataIndex: 'ycjl',
          ellipsis: true,
        },
      ],
      qxdjList: [
        {
          value: 1,
          label: '一般',
        },
        {
          value: 2,
          label: '重要',
        },
        {
          value: 3,
          label: '致命',
        },
      ],
      form: {
        ycdh: '', 
        ycgxgd: '',
        ycfqry: '', 
        ycxxerjgx: '', 
        ycgzdl: '',
        wlmc: '',
        sbmc: '',

        yclx: '',
        ycsl: '',
        ycfqsj: '',
        ycgz: '',
        gzxl: '',
        wlbm: '',
        ycsnmx: '',
        ycms: '',

        ycpd: false,
        qxdj: 1,
        sffg: false,
        sfqx: false,
        sfsdcp: false,
        sddh: '',

        sccl: '',
        wtclr: '',
        zrrqr: false,
        lsccyzr: '',
        thyy: '',
      },
      rules: {
        ycdh: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        ycgxgd: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        ycfqry: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        ycxxerjgx: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        ycgzdl: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        wlmc: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        sbmc: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],

        yclx: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        ycsl: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        ycfqsj: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        ycgz: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        gzxl: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        wlbm: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        ycsnmx: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        ycms: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        ycfj: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        ycpd: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        sccl: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        qxdj: [
          { required: true, message: '请输内容', trigger: 'change' },
        ],
        sffg: [
          { required: true, message: '请输内容', trigger: 'change' },
        ],
        sfqx: [
          { required: true, message: '请输内容', trigger: 'change' },
        ],
        wtclr: [
          { required: true, message: '请输内容', trigger: 'change' },
        ],
        zrrqr: [
          { required: true, message: '请输内容', trigger: 'change' },
        ],
        lsccyzr: [
          { required: true, message: '请输内容', trigger: 'change' },
        ],
        thyy: [
          { required: true, message: '请输内容', trigger: 'change' },
        ],
      },
    };
  },
  watch: {
    value() {
      this.initValue()
    },
    visible(val) {
      if (!val) {
        this.$emit('input', val)
      }
    }
  },
  created() {
  },
  mounted() {
    this.initValue();
  },
  methods: {
    /* validateQuantity(rule, value, callback){
      if (value === '' || value === null) {
        callback(new Error('请输入内容'));
      } else if (!(/^[1-9]\d*$/.test(value))) {
        callback(new Error("只能输入正整数"));
      } else {
        callback();
      } 
    }, */
    initValue() {
      this.visible = this.value
    },
    handleOk(){
      const that = this;
      that.$refs.ruleForm.validate(valid => {
        if (valid) {
        }
      });
    },
    handleCancel(){
      this.visible = false;
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>

<style lang="less">
  .ycczlscs {
    .poros-form .poros-form-item{
      display: flex;
    }
    .poros-form{
      color: rgba(0, 0, 0, 0.85);
    }
    .poros-modal-body{
      max-height: 770px;
      overflow: auto;
    }
    .poros-collapse-borderless{
      background-color: #fff;
    }
    .poros-form-item-label{
      width: 130px;
    }
    .poros-form-item .poros-form-item-control-wrapper{
      overflow: hidden;
    }
    .formLeft{
      width: 50%;
    }
    .formRight{
      width: 50%;
    }
    .w50{
      width: 50%;
    }
  }
</style>

